<%--
  Created by IntelliJ IDEA.
  User: 王一同
  Date: 2021/11/20
  Time: 12:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>BookChart</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/layui/js/echarts.min.js"></script>
</head>
<body>
    <div class="layui-collapse">
        <form class="layui-form" lay-filter="formTest">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">搜索</h2>
                <div class="layui-colla-content layui-show">
                    <label class="layui-form-label" style="width: 30%">日期范围:</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="cpdate" id="test10" placeholder=" 请选择时间 " style="width: 300px">
                    </div>

                    <div class="layui-input-inline">
                        <button type="button" class="layui-btn" lay-submit=""  id="serachBtn" style="margin-left: 6px;">立即查询</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </div>
        </form>

        <div class="layui-colla-item">
            <h2 class="layui-colla-title">图书出版社以及类别销售排行</h2>
            <div class="layui-colla-content layui-show" style="width: 96%;height:50%;">
                <div id="box1" style="width: 40%;height:100%;float: left;margin-left: 5%"></div>
                <div id="box2" style="width: 40%;height:100%;float: left;margin-left: 10%"></div>
            </div>
        </div>
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">图书销售排行</h2>
            <div class="layui-colla-content layui-show" style="width: 96%;height:70%;">
                <div id="box3" style="height: 100%;width:100%;float: left;margin-left: 1%"></div>
            </div>
        </div>
    </div>
</body>
<script>
    //js方式获取本地时间+1天
    Date.prototype.toLocaleStringTomorrow = function() {
        var dateTime=new Date();
        dateTime=dateTime.setDate(dateTime.getDate()+1);
        dateTime=new Date(dateTime);
        var y = dateTime.getFullYear();
        var m = dateTime.getMonth()+1;
        m = m<10?'0'+m:m;
        var d = dateTime.getDate();
        d = d<10?("0"+d):d;
        return y+"-"+m+"-"+d;
    }

    layui.use(['laydate','layer','jquery','element'],function () {
        var element = layui.element;
        var layer = layui.layer;
        var $ = layui.$;
        var laydate = layui.laydate;
        var tomorrowTime = (new Date()).toLocaleStringTomorrow();

        //日期选择器
        var value1;
        laydate.render({
            elem: '#test10'
            ,type: 'datetime'
            ,range: true
            ,max:tomorrowTime
            //每次点击清空之前的日期选择
            ,ready:function(){
                value1 = "";
            }
            ,done: function(value) {
                value1 = value;
            }
        });
        //根据时间查询
        $("#serachBtn").on("click",function () {
            if (value1 == "" || value1 == undefined){
                value1 = "";
            }
            showChartOne();
            showChartTwo();
            showChartThree();
        });

        $(function () {
            value1="";
            showChartOne();
            showChartTwo();
            showChartThree();
        })

        var show;
        function tip(a,str) {
            //在你掉接口拿数据去渲染chart图标的时候，渲染数据的时候判断一下
            if(a.length===0){
                show=str;
            }else {
                show='';
            }
        }

        //图书销售表
        function showChartOne(){
            var myChart = echarts.init(document.getElementById('box3'));
            // 显示标题，图例和空的坐标轴
            myChart.setOption({
                title: {
                    text: '图书销售排行'
                },
                tooltip: {},
                toolbox: {
                    feature: {
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        saveAsImage: {show: true}
                    }
                },
                xAxis: {
                    data: [],
                    axisLabel: {
                        rotate: 35,
                    },
                },
                yAxis: {},
                series: [{
                    name: '数量',
                    type: 'bar',
                    data: []
                }]
            });

            myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画

            var names=[];    //类别数组（实际用来盛放X轴坐标值）
            var nums=[];    //销量数组（实际用来盛放Y坐标值）

            $.ajax({
                type : "post",
                async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                url : "${pageContext.request.contextPath}/findBookCount",
                data: {"valuedate":value1+""},
                success : function(result) {
                    //请求成功时执行该函数内容，result即为服务器返回的json对象

                    tip(result,"您查询的时间范围内暂无图书销售数据");

                    if (result) {
                        for(var i=0;i<result.length;i++){
                            names.push(result[i].bookname+" 书号:"+result[i].bookid);    //挨个取出类别并填入类别数组
                        }
                        for(var i=0;i<result.length;i++){
                            //  nums.push(result[i].productionArrangement.number);    //挨个取出销量并填入销量数组daliy
                            nums.push(result[i].scount);
                        }
                        myChart.hideLoading();    //隐藏加载动画
                        myChart.setOption({        //加载数据图表
                            title:{
                              subtext:show
                            },
                            xAxis: {
                                data: names
                            },
                            series: [{
                                // 根据名字对应到相应的系列
                                name: names,
                                data: nums
                            }]
                        });

                    }
                },
                error : function() {
                    //请求失败时执行该函数
                    layer.msg("图书图表请求数据失败!",{icon:5});
                    myChart.hideLoading();
                }
            });
        };

        function showChartTwo() {
            var chartDom = document.getElementById('box1');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                title: {
                    text: '图书出版社销售排行',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical', // 布局方式，默认为水平布局，可选为：
                                        // 'horizontal' ¦ 'vertical'
                    left: 'left',
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        saveAsImage: {show: true}
                    }
                },
/*                series: [
                    {
                        name:'面积占比',
                        type: 'pie',
                        radius: [40, 100],
                        center: ['50%', '50%'],
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: 8
                        },
                        data: []
                    }
                ]*/
                series: [
                    {
                        name: '面积占比',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '40',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: []
                    }
                    ]
            };

            option && myChart.setOption(option);
/*            myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画*/

            $.ajax({
                type : "post",
                async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                url : "${pageContext.request.contextPath}/bookChart/queryPubCount",    //请求发送到TestServlet处
                data: {"valuedate":value1+""},
                success : function(result) {

                    tip(result,"您查询的时间范围内暂无图书出版社销售数据");

                    myChart.setOption({        //填入数据
                        title:{
                          subtext:show
                        },
                        legend: {
                            data: result.publisher
                        },
                        series: [{
                            data: (function(){
                                var rs = [];
                                for(var res=0;res<result.length;res++){
                                    rs.push({
                                        name :result[res].publisher,
                                        value:result[res].scount
                                    });
                                }
                                return rs;
                            })()
                        }]
                    });
                },
                error : function() {
                    //请求失败时执行该函数
                    layer.msg("图书出版社图表请求数据失败!",{icon:5});
                    myChart.hideLoading();
                }
            });

        };

        function showChartThree() {
            var chartDom = document.getElementById('box2');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                title: {
                    text: '图书类别销售排行',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical', // 布局方式，默认为水平布局，可选为：
                                        // 'horizontal' ¦ 'vertical'
                    left: 'left',
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        saveAsImage: {show: true}
                    }
                },
                series: [
                    {
                        name:'面积占比',
                        type: 'pie',
                        radius: [40, 100],
                        center: ['50%', '50%'],
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: 8
                        },
                        data: []
                    }
                ]
            };

            option && myChart.setOption(option);
            /*            myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画*/

            $.ajax({
                type : "post",
                async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                url : "${pageContext.request.contextPath}/bookChart/queryTypeCount",    //请求发送到TestServlet处
                data: {"valuedate":value1+""},
                success : function(result) {

                    tip(result,"您查询的时间范围内暂无图书类别数据");

                    myChart.setOption({        //填入数据
                        title:{
                            subtext:show
                        },
                        legend: {
                            data: result.booktype
                        },
                        series: [{
                            data: (function(){
                                var rs = [];
                                for(var res=0;res<result.length;res++){
                                    rs.push({
                                        name :result[res].booktype,
                                        value:result[res].scount
                                    });
                                }
                                return rs;
                            })()
                        }]
                    });
                },
                error : function() {
                    //请求失败时执行该函数
                    layer.msg("图书类别图表请求数据失败!",{icon:5});
                    myChart.hideLoading();
                }
            });

        };
    });
</script>
</html>
